<!-- 文章列表页 -->
<script>
    import { onMount } from "svelte";
    import router from "../../routes";
    import DataTable, {
        Head,
        Body,
        Row,
        Cell,
        Pagination,
    } from "@smui/data-table";
    import Select, { Option } from "@smui/select";
    import IconButton from "@smui/icon-button";
    import Button from "@smui/button";
    import { Label } from "@smui/common";
    // import Dialog, { Title, Content, Actions } from "@smui/dialog";
    import { Snackbar, Button as MuiButton } from "svelte-mui/src";

    import { getArticleList, deleteArticle } from "../../api/article";

    let deleteDialogOpen = false;
    let isDelete = false;

    let errAlertVisible = false;
    let errAlertMsg = "error";
    let okAlertVisible = false;
    let okAlertMsg = "success";

    let articleList = [];
    let pageSize = 10;
    let currentPage = 1;
    let totalPage = 0;
    let total = 0;

    // 生命周期时间，挂载完毕
    onMount(async () => {
        getList();
    });

    // 获取文章列表
    function getList() {
        getArticleList(pageSize, 1)
            .then((res) => {
                if (res.data.code != 200) {
                    console.log(res.data.msg);
                    errAlertMsg = res.data.msg;
                    errAlertVisible = true;
                }

                articleList = res.data.data.list;
                currentPage = res.data.data.pagination.currentPage;
                // console.log(currentPage);
                totalPage = res.data.data.pagination.totalPage;
                // console.log(totalPage);
                total = res.data.data.pagination.total;
                // console.log(total);
            })
            .catch((err) => {
                console.log(err);
                errAlertMsg = err;
                errAlertVisible = true;
            });
    }

    // 添加文章按钮点击
    const addArt = () => {
        router.push(`/admin/addart`);
    };

    // 编辑文章
    const editArt = (id) => {
        console.log("编辑" + id);
        router.push(`/admin/addart/${id}`);
    };

    // 删除文章
    const deleteArt = (id) => {
        deleteDialogOpen = true;
        // if (isDelete == false) {
        //     return;
        // }
        deleteArticle(id)
            .then((res) => {
                if (res.data.code != 200) {
                    console.log(res.data.msg);
                    errAlertMsg = res.data.msg;
                    errAlertVisible = true;
                }

                isDelete = false;
                okAlertMsg = "删除成功";
                okAlertVisible = true;
                getList();
            })
            .catch((err) => {
                console.log(err);
            });
    };
</script>

<!-- <Dialog
    bind:open={deleteDialogOpen}
    aria-labelledby="simple-title"
    aria-describedby="simple-content"
>
    <Title id="simple-title">提示</Title>
    <Content id="simple-content">确定删除文章吗?</Content>
    <Actions>
        <Button on:click={() => {isDelete = false}}>
            <Label>取消</Label>
        </Button>
        <Button on:click={() => {isDelete = true}}>
            <Label>确定</Label>
        </Button>
    </Actions>
</Dialog> -->

<Snackbar
    color="#f56c6c"
    bg="#fef0f0"
    bind:visible={errAlertVisible}
    timeout={1}
    style="height: 30px; border-radius: 4px;"
>
    {errAlertMsg}
    <span slot="action">
        <MuiButton
            color="#a8abb2"
            on:click={() => {
                errAlertVisible = false;
            }}>✕</MuiButton
        >
    </span>
</Snackbar>
<Snackbar
    color="#67c23a"
    bg="#f0f9eb"
    bind:visible={okAlertVisible}
    timeout={1}
    style="height: 30px; border-radius: 4px;"
>
    {okAlertMsg}
    <span slot="action">
        <MuiButton
            color="#a8abb2"
            on:click={() => {
                okAlertVisible = false;
            }}>✕</MuiButton
        >
    </span>
</Snackbar>

<p style="color: #66bb6a;">文章列表</p>

<!-- 添加按钮 -->
<Button class="blue lighten-2" on:click={addArt}>
    <Label style="color: #fff;">添加</Label>
</Button>

<div class="artlist">
    <DataTable stickyHeader table$aria-label="文章列表" style="width: 100%;">
        <Head>
            <Row>
                <Cell numeric style="width: 5%;">ID</Cell>
                <Cell style="width: 50%;">标题</Cell>
                <Cell style="width: 15%;">创建时间</Cell>
                <Cell style="width: 15%;">修改时间</Cell>
                <Cell style="width: 15%;">操作</Cell>
            </Row>
        </Head>
        <Body>
            {#each articleList as art (art.id)}
                <Row>
                    <Cell numeric>{art.id}</Cell>
                    <Cell>{art.title}</Cell>
                    <Cell>{art.createDate}</Cell>
                    <Cell>{art.lastModifiedDate}</Cell>
                    <Cell
                        ><Button on:click={() => editArt(art.id)}>
                            <Label>编辑</Label>
                        </Button>
                        <Button
                            color="secondary"
                            on:click={() => deleteArt(art.id)}
                        >
                            <Label>删除</Label>
                        </Button>
                    </Cell>
                </Row>
            {/each}
            <!-- <Row>
                <Cell numeric>1</Cell>
                <Cell>哈哈哈</Cell>
                <Cell>tingyu</Cell>
                <Cell>ygf@163.com</Cell>
                <Cell
                    ><Button on:click={() => {}}>
                        <Label>编辑</Label>
                    </Button>
                    <Button color="secondary" on:click={() => {}}>
                        <Label>删除</Label>
                    </Button>
                </Cell>
            </Row> -->
        </Body>

        <Pagination slot="paginate">
            <svelte:fragment slot="rowsPerPage">
                <Label>每页</Label>
                <Select variant="outlined" bind:value={pageSize} noLabel>
                    <Option value={10}>10</Option>
                    <Option value={20}>20</Option>
                    <Option value={50}>50</Option>
                </Select>
            </svelte:fragment>
            <svelte:fragment slot="total">
                {currentPage} / {totalPage}
            </svelte:fragment>

            <!-- <svelte:fragment slot="rowsPerPage">
                <Label>每页</Label>
                <Select variant="outlined" bind:value={pageSize} noLabel>
                    <Option value={10}>10</Option>
                    <Option value={20}>20</Option>
                    <Option value={50}>50</Option>
                </Select>
            </svelte:fragment>
            <svelte:fragment slot="total">
                {currentPage} / {totalPage}
            </svelte:fragment> -->

            <IconButton
                class="material-icons"
                action="prev-page"
                title="Prev page"
                on:click={() => currentPage--}
                disabled={currentPage <= 1}>chevron_left</IconButton
            >
            <IconButton
                class="material-icons"
                action="next-page"
                title="Next page"
                on:click={() => currentPage++}
                disabled={currentPage >= totalPage}>chevron_right</IconButton
            >
        </Pagination>
    </DataTable>
</div>

<style>
    .artlist {
        margin: 10px 0;
        width: 98%;
        text-align: center;
        border-radius: 2px;
    }

    :global(.mdc-select__menu) {
        height: unset;
        width: unset;
    }
</style>
